<template>
	<div class="personal-data">
		<h3 class="personal-photo"><span>修改头像</span><i><img v-if="!imgchange" :src="'http://www.ntyouxuan.com/'+personaldata.portrait"/><img :src="imgurl" v-else/><input type="file" @change="imagetian()" name="file" id="" value="" accept="image/*"/></i></h3>
		<ul class="personal-list">
			<li class="personal-name"><span>我的昵称</span><input type="text" value="我的昵称" v-model="username" @keyup="trim('g')"/></li>
			<li class="personal-tel"><span>我的手机号</span><span v-text="personaldata.phone_mob" v-if="personaldata.phone_mob"></span><router-link to="/bindphone" v-else>去绑定 <img src="../../img-order/icon_next@3x.png"/></router-link></li>
			<li class="personal-wx"><span>微信账号</span><span v-text="personaldata.wx_name">NTYX1818</span></li>
		</ul>
		<div class="personal-xgpw">
			<router-link to="/pwxg">
				<span>修改登录密码</span>
				<img src="../../img-order/icon_next@3x.png"/>
			</router-link>
		</div>
		<div class="personal-bc" @click="personalajax">保存</div>
		<div class="personal-backlogin" @click="tclogin()">退出登录</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				user:0,
				imgurl:'',
				imgchange:false,
				personaldata:'',
				username:'',
			}
		},
		created:function(){
			if(localStorage.getItem("nt_user")){
				this.user=localStorage.getItem("nt_user");
			}else{
				this.$router.push({path:'/login'})
			}
		},
		methods:{
			imagetian:function(){
				var self=this;
				var dataUrl=$('input[type=file]')[0].files[0];
				var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
                    console.log("成功读取....");
                    self.imgurl=e.target.result;
                    self.imgchange=true;
                    $('input[type=file]')[0].value="";
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(dataUrl);				
			},
			trim:function(is_global){
				var self=this;
			   self.username = self.username.replace(/(^\s+)|(\s+$)/g,"");
			   if(is_global.toLowerCase()=="g")
			   {
			    self.username = self.username.replace(/\s/g,"");
			   }
			},
			personalajax:function(){
				var self=this;
				if(this.username){
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_buyer_order&act=profile_post",
						data:{'token':self.user,'portrait':self.imgurl,'user_name':self.username},
						dataType:'json',
						success:function(res){
							if(res.done){
								if(res.retval.status){
									localStorage.setItem('nt_laiyuan','login');
									history.go(-1);
									layer.open({
										content: '修改成功',
										skin: 'msg',
										time: 2 //3秒后自动关闭
									});
									console.log('修改成功');
								}
							}else{
								layer.open({
									content: '用户名重复',
									skin: 'msg',
									time: 2 //3秒后自动关闭
								});
								console.log("修改失败");
							}
						}
					});
				}else{
					console.log(this.username);
				}
			},
			tclogin:function(){
				localStorage.clear();
				this.$router.push({path:'/login'})
			}
		},
		mounted:function(){
			var self=this;
			$.ajax({
				type:"post",
				url:furl+"index.php?app=ajax_buyer_order&act=profile",
				data:{'token':self.user},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.username=res.retval.user_name;
						self.personaldata=res.retval;
					}
				}
			});
		}
	}
</script>

<style>
	.personal-data{font-size:0;}
	.personal-photo{background-color:#fff;padding-left: 0.32rem;padding-right:0.32rem;margin-bottom: 0.16rem;}
	.personal-photo>span{font-size:0.32rem;color:#333;line-height: 1.52rem;display: inline-block;font-weight:500;}
	.personal-photo>i{float:right;display: inline-block;width:1.2rem;height:1.2rem;border-radius:50%;overflow: hidden;margin-top: 0.15rem;position:relative;box-shadow: 0 0 0.04rem #4C9D31;}
	.personal-photo>i>img{width:100%;height:100%;}
	.personal-photo>i>input{position:absolute;top:0;left:0;width:1.2rem;height:1.2rem;font-size:0;border:0;background-color:rgba(255,255,255,0);opacity: 0;}
	.personal-list{background-color:#fff;padding-left:0.32rem;padding-right:0.32rem;padding-top: 0.1rem;padding-bottom: 0.1rem;margin-bottom: 0.16rem;}
	.personal-list>li{overflow: hidden;text-align: right;}
	.personal-list>li>span:first-child{float:left;font-size:0.32rem;color:#333;line-height: 0.92rem;}
	.personal-list>li>span:last-child,.personal-list>li>a:last-child{font-size:0.28rem;color:#999;line-height: 0.92rem;}
	.personal-list>li>a:last-child>img{width:0.44rem;height:0.44rem;}
	.personal-name>input{text-align: right;height:0.92rem;line-height: 0.92rem;color:#999;font-size:0.28rem;}
	.personal-xgpw{background-color:#fff;height:1.08rem;line-height: 1.08rem;box-sizing: border-box;padding-left: 0.32rem;padding-right: 0.32rem;}
	.personal-xgpw>a{display: block;height:100%;}
	.personal-xgpw>a>span{font-size:0.32rem;color:#333;}
	.personal-xgpw>a>img{width:0.44rem;height:0.44rem;float:right;margin-top: 0.32rem;}
	.personal-bc{margin:0.4rem 0.32rem 0;height:1rem;
	background: -webkit-linear-gradient(left, #ffb661 , #fb9722); 
    background: -o-linear-gradient(right, #ffb661, #fb9722); 
    background: -moz-linear-gradient(right, #ffb661, #fb9722);
    background: linear-gradient(to right, #ffb661 , #fb9722);
	color:#fff;
	font-size:0.36rem;line-height: 1rem;text-align: center;box-sizing: border-box;letter-spacing: 0.4rem;padding-left:0.4rem;border-radius:1rem;}
	.personal-backlogin{margin:0.3rem 0.32rem;background-color:#fff;border-radius:1rem;height:1rem;color:#666;font-size:0.36rem;text-align: center;line-height: 1rem;box-sizing: border-box;box-shadow: 0 0 0.04rem #3c3c3c;}
</style>